React Native分享记录
今天我给大家分享React Native先给大家看个好东西这个ios app就是用react native写的，没有用到一句OC，也没有用到webview所以今天的主题是使用js写原生应用React Native的主旨是Learn once, write anywhereReact认为各个平台有其各自的特点和特长，如果使用一套代码，一个界面可能不能发挥各自平台的优势，所以...
2024-01-10
React-Native 遇到的坑
一、错误日志：Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.这个错误是在使用 RN官网推出最新的列表组件 FlatList 是出现的红色警告，出现这个错误可以正常运行，就是每次调试时看到它总觉得怪怪的，所以就查资料处理了，下面给出解决方...
2024-01-10
React Native 架构一览
一.架构设计整体上分为三大块，Native、JavaScript 与 Bridge：Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来。具体的，Shadow Tree 用来定...
2024-01-10
React Native-组件的引用
之前文章中，我们使用了许多React Native组件，也定义了一些组件。但是我们都没有定义组件的标识，我们都是通过回调方法处理组件对应的事件，这种情况能满足绝大多数需求，有些情况我们需要对组件进行操作，此时就需要获取组件的引用，进而通过该应用对组件进行操作。比如，我们可以通过引用...
2024-01-10
react Native 第四天
1.props : 1.props 就是 Image 标签的src ，input 标签的text 用于组件初始化时需要的一些数据。2.使用props可以定制化插件，使插件可以复用3.props是从父元件传入2.理解state 1.有两种类型的数据可以控制组件，一个是props，props在组件的整个生命周期中是固定的2.如果要改变组件的数据需要改变，我们必须使...
2024-01-10
React-Native性能优化点
shouldComponentUpdate确保组件在渲染之后不需要再更新的，即静态组件，尽量在其中增加shouldComponentUpdate方法,防止二次消耗所产生的性能消耗shouldComponentUpdate() { //完全静态的组件,无需更新 return false;}keykey是react的一个特殊的属性，它是给React自己用的。如果我们动态地创建 React 元素，而且 React ...
2024-01-10
React Native遇到的问题(一)
在我们创建React Native项目的时候发现gradle 版本相对比较低的，而且很多情况下直接编译会报错。而网上的很多解决方案就是gradle version改为1.2.3,于是，我有一个疑问，现在的gradle verion都已经3.0.1了，为什么还不升级呢？但是我发现我直接修改后，更是报各种错。 首先看下图这是我在网上搜到的一与...
2024-01-10
React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画，和每个动画可以处理的功能有哪些。填坑材料Animated动画API提供了一些现成的组件：Animated.View，Animated.T...
2024-01-10
React Native中的全局变量/常量
在ReactNative中，有一种方法可以在全局变量上定义将要使用的所有字符串，就像在Android开发中一样，这里有一个String.xml，您可以在其中放置所有字符串。回答：我要做的是创建一个globals模块…//文件：Globals.jsmodule.exports = { STORE_KEY: 'a56z0fzrNpl^2', BASE_URL: 'http://someurl.com', COLOR: { ORANGE: '#C50', DA...
2024-01-10
React Native获取手机的各种高度
一、窗口高度即图中黄色+蓝色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('window').height; 二、屏幕高度即图中黄色+蓝色+红色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('screen').height; 三、内容高度即图中蓝色部分import { Style...
2024-01-10
React Native声明属性和属性确认
属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。 //自定义组件export default class ConfirmDialog extends Component { //.......
2024-01-10
iOS原生项目中集成React Native
1.本文的前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。2.使用Xcode新建一个工程。EmbedRNMeituan[图1]3.使用CocoaPods安装React Native在工程目录下新建Podfile文件，并配置需要使用的第三方库pod 'React', '0.13.0-rc' pod "React/RCTText" pod "React/RCTActionSheet" pod "React/RCTGeolocation" pod "React/RCTIm...
2024-01-10
React Native之FlexBox布局
参考原文链接：https://www.cnblogs.com/wujy/p/5841685.html弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至...
2024-01-10
React Native开发之expo的使用
背景react native官方现在推荐的项目构建方式是create-react-native-app，即简称CRNA，并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后，命令行输入npm start，随即会为开发者创建一个开发服务器，并打印出大大的二维码，使用expo扫码，即可预览项目，不过真的这么丝滑吗，使用中还是遇到了一些...
2024-01-10
React Native工作小技巧及填坑记录
以下是本人在React Native开发工作中使用的一些小技巧,记录一下。1.从网络上拉取下来的React Native缺少React和React Native库.终端1. cd 项目根目录2. npm install3. 完成之后,在根目录中会出现node_modules文件夹(和package.json同级目录).OK.接下来使用Xcode再次打开就好了.2.如何导入第三方库.1.cd 项目根目录2.npm i 库...
2024-01-10
React Native与OC之间通信那些事
React Native用IOS自带的JavaScriptCore作为JS的解析引擎，普通的JS-OC通信就是React Native在OC定义一个模块方法，JS可以直接调用这个模块方法并还可以无缝衔接回调。http://www.jianshu.com/p/c95d62190781作者：IMWeb-朱灵子http://imweb.io/topic/5812ab7be2017a3d1878b508具体的接口调用实现方法如下所示：将OC注册进来的模块...
2024-01-10![[<span style='color:red;'>React Native</span>] 解析JSON文件](/wp-content/uploads/thumbs/535012_thumbnail.jpg)
[React Native] 解析JSON文件
在编写代码时,开发者有时需要存储一些比较多，在应用程序运行时不需要更改的数据。文件大不便于写在代码中，可以把这些数据存储到JSON文件中。优点非常明显： 1. 数据存放在单独的文件中，代码精简有条理。 2. JSON数据格式便于阅读，修改。给大家演示下，在项目目录下建立一个名为data的目...
2024-01-10React Native悬浮按钮组件的示例代码
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --savereact-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-na...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 下拉放大动画](/wp-content/uploads/thumbs/534154_thumbnail.jpg)
[RN] React Native 下拉放大动画
React Native 下拉放大动画经测试，无法运行https://www.jianshu.com/p/1c960ad75020...
2024-01-10
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹，这是存放 node 模块的地方，Node.js 的包管理器npm 是全球最大的开源库生态系统。提到npm，一般指两层含义：一是 Node.js 开放式模块登记和管理系统，另一种是 Node.js默认的模块管理器，是一个命令行软件，用来安装和管理 node 模块。本文旨在探讨如...
2024-01-10无法运行jetifier React Native
我尝试运行react-native run-android，但出现此错误。info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. error Failed to run jetifier. Run CLI with --verbose flag for more details. Error: spawnSync C:\Users\JayK...
2024-01-10
现有iOS项目集成React Native过程记录
在搭建配置了RN的开发环境，然后，本文记录在现有iOS项目集成React Native的过程，官方推荐使用Cocoapods，项目一开始也是使用它，只是有时安装库很慢，还不如复制粘贴库来的快，就删除它了，这里就使用手动集成的方式吧。 1. 新增React Native文件路径和json说明文件，进入项目根目录(*.xcodeproj文...
2024-01-10
React-native 关于键盘遮挡界面问题
//引入 KeyboardAvoidingView import { KeyboardAvoidingView } from 'react-native';//使用 KeyboardAvoidingView render(){ return <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}> {/*具体页面内容*/} </KeyboardAvoidingView>}//android 已经处理 其实只需要处理I...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 滚动跳转到指定位置](/wp-content/uploads/thumbs/536523_thumbnail.jpg)
[RN] React Native 滚动跳转到指定位置
React Native 滚动跳转到指定位置一、结构<ScrollView horizontal={true} ref={(view) => { this.myScrollView = view; }}> <View></View> ...<ScrollView>二、实现方法1）先给View增加一个onLayout属性<View onLayout={event=>{this.layoutX = event.nativeEvent.layout.x}}>2）然后通过下面这样就可以实现滚动到指定位置：...
2024-01-10
小米手机调试React Native,怎样进入开发者菜单
调试react-native应用时，真机上要通过按下菜单按钮或者摇动手机来开启Developer Menu。我在小米手机上尝试无效，有以下两个权限需要打开：进入设置—更多应用—找到要调试的应用1、权限管理—显示悬浮窗2、通知管理—悬浮通知（打开）打开这两项设置，在调试应用界面时，再次摇动手机就出...
2024-01-10
